<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
<canvas id="canvas" width="1920" height="1000"></canvas>
</body>
<script>
  var oMyCanvas = document.getElementById('canvas');

  if (oMyCanvas && oMyCanvas.getContext) {
    // 转换为 2D 图形对象；
    var context = oMyCanvas.getContext('2d');

    if (context) {
      // 绘制圆形
      context.fillStyle = 'rgba(0, 255, 0, 0.25)';
      context.arc(200, 150, 80, 0, Math.PI * 2, true);
      context.fill();

      // 绘制描边圆形
      context.fillStyle = 'rgba(0, 255, 0, 0.25)';
      context.arc(400, 150, 80, 0, Math.PI * 2, true);
      context.fill();
      context.stroke();

      // 绘制圆形
      context.beginPath();
      context.fillStyle = 'rgba(0, 255, 0, 0.25)';
      context.arc(600, 150, 80, 0, Math.PI * 2, true);
      context.fill();
      // 断开上一个的联系
      context.beginPath();

      // 断开上一个
      context.fillStyle = 'rgba(0, 255, 0, 0.25)';
      context.arc(800, 150, 80, 0, Math.PI * 2, true);
      context.fill();
      context.stroke();

      // 绘制圆形
      context.beginPath();
      context.fillStyle = 'rgba(0, 255, 0, 0.25)';// 绿色；
      context.arc(1000, 150, 80, 0, Math.PI * 2, true);
      context.fillStyle = 'rgba(0, 255, 255, 0.25)';// 蓝色     后一个会覆盖前一个 的颜色
      context.arc(1200, 150, 80, 0, Math.PI * 2, true);
      context.fill();

      // 绘制圆形
      context.beginPath();
      context.fillStyle = 'rgba(0, 255, 0, 0.25)';// 绿色；
      context.arc(1400, 150, 80, 0, Math.PI * 2, true);
      context.fill();

      context.beginPath();

      context.fillStyle = 'rgba(0, 255, 255, 0.25)';// 蓝色     后一个会覆盖前一个
      context.arc(1600, 150, 80, 0, Math.PI * 2, true);
      context.fill();

      // 左侧 1/4 圆弧
      context.beginPath();
      context.arc(
        200,            // x
        450,            // y
        95,             // radius
        2.4,            // startAngle
        Math.PI / 2,    // endAngle
        false,          // anticlockwise
      );
      context.fillStyle = 'rgba(0, 0, 255, 0.25)';
      context.fill();
      context.strokeStyle = 'rgba(255, 0, 0, 0.25)';
      context.closePath();
      context.stroke();

      context.beginPath();
      context.arc(400, 450, 80, -2, Math.PI / 1.3 , false);
      context.fillStyle = 'rgba(255, 255, 0, 0.25)';
      context.fill();
      context.strokeStyle = 'rgba(255, 0, 0, 0.25)';
      context.closePath();
      context.stroke();

      // 左侧 1/4 圆弧
      context.beginPath();
      context.arc(700, 450, 80, -3.2, Math.PI / 4.8, false);
      context.arc(700, 550, 80, -0.6, Math.PI / 1.4 , false);
      context.arc(600, 550, 80, 1.2,  Math.PI / 0.63 , false);
      context.fillStyle = 'rgba(255, 255, 0, 1)';
      // 颜色填充
      context.fill();
      context.strokeStyle = 'rgba(255, 0, 0, 1)';
      // 颜色填充结束
      context.closePath();
      // 描边、读取后面的颜色值
      context.stroke();
    }
  }
</script>
</html>
